<template>
  <div class="containerBox">
    <el-form label-width="110px" :model="dataForm" :rules="dataRules" ref="dataForm">
      <el-form-item prop="name" label="优惠券名称">
        <el-input  v-model="dataForm.name" placeholder="单行输入"></el-input>
      </el-form-item>
      <el-form-item prop="denomination" label="面额">
        <el-input  v-model="dataForm.denomination" placeholder="单行输入"></el-input>  元
      </el-form-item>
      <el-form-item prop="available" label="满多少可用">
        <el-input  v-model="dataForm.available" placeholder="单行输入"></el-input>  元
      </el-form-item>
      <el-form-item label="有效期限">
          <el-date-picker
            v-model="dataForm.term"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
      </el-form-item>
      <small>注：生效前卖家可以领取但不能使用</small>
      <el-form-item label="类型">
        <el-radio v-model="dataForm.type" label="TYQ">通用券</el-radio>
        <el-radio v-model="dataForm.type" label="BFCP" @click.native="chooseGoods">部分产品</el-radio>
        <el-radio v-model="dataForm.type" label="PLQ">品类券</el-radio>
        <el-radio v-model="dataForm.type" label="SJQ">商家券</el-radio>
      </el-form-item>
      <el-form-item label="是否上架">
        <el-radio v-model="dataForm.isUpperShelf" label="YES">立即上架</el-radio>
        <el-radio v-model="dataForm.isUpperShelf" label="NO">放入仓库</el-radio>
      </el-form-item>
      <el-form-item label="">
        <el-button @click.native="saveBtn">保存</el-button>
        <!--<el-button @click.native="back">返回</el-button>-->
      </el-form-item>
    </el-form>
    <el-dialog
      :visible.sync="shopChoose"
      width="800px"
      title="适用商品列表"
    >
      <div class="tableList">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="65"></el-table-column>
          <el-table-column property="goodsName" label="商品名称"></el-table-column>
          <el-table-column property="goodsPrice" label="价格"></el-table-column>
          <el-table-column property="goodsStock" label="库存"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a class="oper iconfont" @click="operation(scope.row)">&#xe6f0;</a>
            </template>
          </el-table-column>
        </el-table>
        <!--<el-pagination-->
          <!--class="pagination"-->
          <!--@size-change="handleSizeChange"-->
          <!--@current-change="handleCurrentChange"-->
          <!--:current-page="currentPage"-->
          <!--:page-sizes="[10, 15, 20, 25, 30]"-->
          <!--:page-size="pageSize"-->
          <!--layout="total, sizes, prev, pager, next"-->
          <!--:total="tableData.length">-->
        <!--</el-pagination>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'addCoupon',
  data () {
    return {
      shopChoose: false,
      dataForm: {
        name: '',
        denomination: '',
        available: '',
        term: '',
        type: 'TYQ',
        isUpperShelf: 'YES'
      },
      dataRules: {
        name: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' }
        ],
        denomination: [
          { required: true, message: '请输入面额', trigger: 'blur' }
        ],
        available: [
          { required: true, message: '请输入满减数值', trigger: 'blur' }
        ]
      },
      tableData: [
        {
          goodsName: 'test',
          goodsPrice: '99',
          goodsStock: '0'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      multipleSelection: null
    }
  },
  methods: {
    chooseGoods () {
      this.shopChoose = true
    },
    saveBtn () {
      console.log(this.dataForm)
      this.$message('保存')
    },
    back () {
      this.$store.commit('addVisibelFn', false)
    },
    operation (item) {
      console.log(item)
      this.$message('删除')
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    }
  }
}
</script>

<style scoped lang="less">
  .containerBox .el-form{
    /deep/ .el-input--medium {
      width:200px;
    }
    small{
      margin-left:110px;
      font-size:14px;
      margin-bottom: 20px;
      display: inline-block;
    }
  }
  .iconfont{
    color: #000;
    font-weight: bold;
  }
</style>
